﻿
@{
    ViewBag.Title = "Index";
}
<div class="layui-table-tool" style="min-height:unset; padding-left:0; padding-right:0;margin-bottom:-10px">
    <div class="layui-btn-container" style="padding-left:10px;">
        @Html.LayuiButton("add", "新增模块", "layui-btn layui-btn-sm", "/System/SysModule/Add")
        <a id="expand" class="layui-btn layui-btn-sm">全部展开</a>
        <a id="fold" class="layui-btn layui-btn-sm">全部收起</a>
    </div>
</div>
<table id="table"></table>
<script type="text/html" id="rowbar">
    @Html.LayuiButton("edit", "修改", "layui-btn layui-btn-primary layui-btn-xs", "/System/SysModule/Edit")
    @*@Html.LayuiButton("delete", "删除", "layui-btn layui-btn-danger layui-btn-xs", "/System/SysModule/Delete")*@
</script>
<script>
    layui.config({
        base: '/Content/lib/lay-module/'
    }).extend({
        treeTable: 'treeTable/treeTable'
    }).use(['treeTable'], function () {
        var $ = layui.jquery;
        var treeTable = layui.treeTable;
        // 渲染表格
        var treeTb = treeTable.render({
            elem: '#table',
            even: true,
            tree: {
                iconIndex: 0,  // 折叠图标显示在第几列
                idName: 'ID',  // 自定义id字段的名称
                pidName: 'ParentID',  // 自定义标识是否还有子节点的字段名称
                isPidData: true  // 是否是pid形式数据
            },
            cols: [
                //{ type: 'radio', width: 40 },
                //{ field: 'ID', width: 80, align: 'center',  title: '模块ID' },
                { field: 'ModuleName', minWidth: 200, title: '模块名称' },
                { field: 'ModuleDesc', title: '模块描述' },
                //{ field: 'ParentID', width: 100, align: 'center',  title: '父模块ID' },
                { field: 'ModuleUrl', title: '模块链接' },
                { field: 'ModuleIcon', title: '模块图标' },
                { field: 'ModuleSort', width: 80, align: 'center', title: '排序号' },
                {
                    field: 'ModuleType', width: 100, align: 'center', templet: function (d) {
                        if (d.ModuleType == 2) {
                            return '<span class="layui-badge layui-bg-gray">按钮</span>';
                        }
                        if (d.ModuleType == 0) {
                            return '<span class="layui-badge layui-bg-blue">目录</span>';
                        } else {
                            return '<span class="layui-badge-rim">菜单</span>';
                        }
                    }, title: '模块类型'
                },
                { templet: '#rowbar', width: 120, align: 'center', title: '操作' }
            ],
            reqData: function (data, callback) {
                //在这里写ajax请求，通过callback方法回调数据
                $.ajax({
                    url: 'List',
                    success: function (res) {
                        callback(res.data);
                    }
                });
            }
        });
        
        $("#add").click(function () {
            layer.open({
                type: 2,
                title: '新增模块',
                maxmin: true,
                area: ['400px', '400px'],
                content: 'Add',
                end: function () {
                    treeTb.refresh();
                },
                success: function (layero, index) {
                    layer.iframeAuto(index);
                }
            });
        })
        $("#expand").click(function () {
            treeTb.expandAll();
        })
        $("#fold").click(function () {
            treeTb.foldAll();
        })

        //监听工具条
        treeTable.on('tool(table)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'delete':
                    $.ajax({
                        url: 'Delete',
                        data: { id: data.ID },
                        success: function (res) {
                            layer.alert(res.msg, function () {
                                treeTb.refresh();
                            })
                        }
                    });
                    break;
                case 'edit':
                    layer.open({
                        type: 2,
                        title: '编辑模块',
                        maxmin: true,
                        area: ['400px', '400px'],
                        content: 'Edit?id=' + data.ID,
                        end: function () {
                            treeTb.refresh(); 
                        },
                        success: function (layero, index) {
                            layer.iframeAuto(index);
                        }
                    });
                    break;
            }
        });
    });
</script>